<template>
	<div>
		<el-row>
			<!--<el-col :span="2" style="margin-right:0px;">
				<p class="queryLabel">状态:</p>
			</el-col>
			<el-col :span="4" style="margin-right: 0px;">
				<el-select size="small" style="width:85%;" v-model="condition.enterType" placeholder="请选择状态" clearable>
					<el-option v-for="item in transferType" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>-->
			<el-col :span="2" style="margin-left: 0px;">
				<p class="queryLabel">申请时间:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="data.firstStart" size="small" style="width:92%;" type="date" clearable placeholder="申请日期">
				</el-date-picker>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">至:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="data.firstStarts" size="small" style="width:92%;" type="date" clearable placeholder="申请日期">
				</el-date-picker>
			</el-col>
			<el-col :span="12" style="padding-left: 0px;text-align: right">
				<el-button type="primary" size="small" v-on:click='carSaleQuery'>查 询</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" border style="width: 100%;align-content: center;" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" label="选择">
					</el-table-column>
					<el-table-column label="发出仓库" prop="fromWarehouse" :formatter="fromWarehouseCov">
					</el-table-column>
					<el-table-column label="目标仓库" align="right" prop="aimWarehouse" :formatter="aimWarehouseCov">
					</el-table-column>
					<el-table-column label="调拨类型" align="right" prop="allocationType" :formatter="saleStatusCov">
					</el-table-column>
					<el-table-column label="调拨数量" align="right" prop="allocationNum">
					</el-table-column>
					<el-table-column label="申请人" align="right" prop="uName">
					</el-table-column>
					<el-table-column label="调拨状态" align="right" :formatter="statusCov">
					</el-table-column>
					<el-table-column label="操作" align="right" width="100">
						<template scope="scope">
							
							<el-button type="primary" size="mini" @click.native.prevent="info(scope.$index)">明细</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog title="调拨单审批" v-model="comFormShow" size="large">
			<el-card class="box-card-f">
				<el-form :model="comFormData" ref="comForm" :rules="Rule" label-width="130px">
					<el-col :span="6">
						<el-form-item label="目标仓库：" prop="allocationOrder.aimWarehouse" required>
							<el-select size="small" v-model="comFormData.allocationOrder.aimWarehouse" placeholder="请选择目标仓库" clearable disabled>
								<el-option v-for="item in warehouseCombo" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="调拨日期：" prop="allocationOrder.allocationDate" required>
							<el-date-picker v-model="comFormData.allocationOrder.allocationDate" size="small" style="width:100%;" type="date" clearable placeholder="入库日期" readonly>
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="预计回库时间：" prop="allocationOrder.estimateBackDate" required><!--estimateBackDate-->
							<el-date-picker v-model="comFormData.allocationOrder.estimateBackDate" size="small" style="width:100%;" type="date" clearable placeholder="入库日期" readonly>
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="流转天数：" prop="allocationOrder.arriveWarehouseDate" required>
							<el-input size="small" v-model="comFormData.allocationOrder.dayNum" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="调拨类型：" prop="allocationOrder.allocationType" required>
							<el-select size="small" v-model="comFormData.allocationOrder.allocationType" placeholder="请选择调拨类型" clearable disabled>
								<el-option v-for="item in transferTypeCombo" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="融资方式：" prop="allocationOrder.rongzi" required>
							<el-input size="small" v-model="comFormData.allocationOrder.rongzi" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="交款金额：" prop="allocationOrder.payMoney">
							<el-input size="small" v-model="comFormData.allocationOrder.payMoney"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="交款时间：" prop="allocationOrder.payTime">
							<el-input size="small" v-model="comFormData.allocationOrder.payTime"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="存放车辆：" prop="allocationOrder.storeCar">
							<el-input size="small" v-model="comFormData.allocationOrder.storeCar"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="保证金金额：" prop="allocationOrder.depositMoney">
							<el-input size="small" v-model="comFormData.allocationOrder.depositMoney"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="保证金比例：" prop="allocationOrder.depositRatio">
							<el-input size="small" v-model="comFormData.allocationOrder.depositRatio"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="调拨原因：" prop="allocationOrder.allocationReason" required>
							<el-input size="small" type="textarea" :rows="2" v-model="comFormData.allocationOrder.allocationReason" readonly></el-input>
						</el-form-item>
					</el-col>

				</el-form>
			</el-card>
			<el-col :span="24">
				<el-table :data="comFormData.allocationOrderDetailList" border style="width: 100%;align-content: center;">			
					<el-table-column prop="vin" label="VIN" width="180">
					</el-table-column>
					<el-table-column prop="carSeries" label="车系名称" width="100">
					</el-table-column>
					<el-table-column prop="carModel" label="车型名称" width="100">
					</el-table-column>
					<el-table-column prop="configure" label="配置名称" width="100">
					</el-table-column>
					<el-table-column prop="carModelYear" label="车型年" width="100">
					</el-table-column>
					<el-table-column prop="appearanceCode" label="外观代码" width="100">
					</el-table-column>
					<el-table-column prop="appearanceName" label="外观颜色" width="100">
					</el-table-column>
					<el-table-column prop="trimCode" label="内饰代码" width="100">
					</el-table-column>
					<el-table-column prop="trimName" label="内饰名称" width="100">
					</el-table-column>
					<el-table-column prop="chooseCode" label="加装代码" width="100">
					</el-table-column>
					<el-table-column prop="chooseName" label="加装名称" width="100">
					</el-table-column>
				</el-table>
				<!--<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>-->
			</el-col>
			<el-card class="box-card-r">
				<el-col :span="2" style="margin-left: 0px;">
					<p class="queryLabel">审批意见:</p>
				</el-col>
				<el-col :span="22">
					<el-input size="small" type="textarea" :rows="2" v-model="allocationReasons"></el-input>
				</el-col>
			</el-card>
			<div slot="footer" class="dialog-footer">
				<el-button @click="comFormShow = false">取 消</el-button>
				<el-button type="primary" v-on:click='saveOrder()' v-if="btnGroup.save">保 存</el-button>
				<el-button type="primary" v-on:click='save("0")'>通 过</el-button>
				<el-button type="primary" v-on:click='saves("2")'>驳 回</el-button>
			</div>
		</el-dialog>
		<carserice :show="showStart" v-if="showStart" v-on:close="showStart=false" v-on:insert="insert"></carserice>
	</div>
</template>
<script>
	import carserice from '../../insPlugins/carSeries.vue'
	import moment from 'moment'
	export default {
		data: function() {
			return {
				//仓库转换
				levelConvertData:{},
				//调拨类型
				transferTypeCombo: [{
					label: '二网调拨',
					value: '0'
				}, {
					label: '临时挑拨',
					value: '2'
				}, {
					label: '外展调拨',
					value: '1'
				}],
				comFormShow: false,
				//日期查询条件
				data: {
					firstStart: "",
					firstStarts: ""
				},
				//预计天数
				dayNum:"0",
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//仓库类型下拉
				warehouseType: [],
				//仓库下拉
				warehouseCombo: [],
				//合格证状态
				certificateStatusCovertData: {},
				//调拨类型转换
				tranTypeConvertData:{},
				//车辆销售状态下拉
				transferType: [{
					label: '未调拨',
					value: '0'
				}, {
					label: '已出库',
					value: '1'
				}, {
					label: '已入库',
					value: '2'
				}],
				comFormData: {
					allocationOrder: {
						detailId: "",
						id: "",
						fromWarehouse: "", //  发出仓库
						aimWarehouse: "", //  接受仓库
						allocationType: "", //  调拨类型
						allocationDate: "", //  调拨时间
						allocationReason: "", //调拨原因
						applicant:"",//申请人
						estimateBackDate:"",
						dayNum:"",
						rongzi:"",
						payMoney: "", //交款金额
						payTime: "", //交款时间
						storeCar: "", //存放车辆
						depositMoney: "", //保证金金额
						depositRatio: "", //保证金比例
					},
					allocationOrderDetailList: [],
				},
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//公司数据
				tableData: {
					total: 0,
					dataList: []
				},

				condition: {
					enterType: "",
					carModel: "",
					wareHouse: "",
					enterTimeStart: "",
					enterTimeStop: "",

				},
				//审批意见
				allocationReasons:"",
				conditions: {
					ID: "",
					allocationId: "",
					approvaler: "",
					approvalStatus: "",
					approvalDate: "",
					approvalOpinion: "",
					companyId: "",
				},
				//warehouseFormShow: false,
				//校验规则
				Rule: {

				},

				multipleSelection: [],
				companyId: "",

				//树形图查询条件
				dictTreeSearchValue: "",
				paramTreeData: [],
				//树型数据配置
				defaultProps: {
					children: 'child',
					label: 'label',
				},
				showStart: false,
				//选中的类型（车型/车系）
				carType: '',
				//选择的车辆信息
				datalabel: '',
				datavale: '',
				//车型名称
				carModelName: "",
				btnGroup: {},
			}
		},
		methods: {
			//保存
			saveOrder: function() {
				debugger;
				//调拨时间
				this.$data.comFormData.allocationOrder.allocationDate = this.momentFu(this.$data.comFormData.allocationOrder.allocationDate);
				//预计回库时间arriveWarehouseDate
				this.$data.comFormData.allocationOrder.arriveWarehouseDate = this.momentFu(this.$data.comFormData.allocationOrder.arriveWarehouseDate);
				//获取调拨数量
				this.$data.comFormData.allocationOrder.allocationNum = this.$data.comFormData.allocationOrderDetailList.length;
				this.$http.post(this.API_ROOT + '/scm/allocationOrder/saveAllocation', this.$data.comFormData)
					.then(resp => {
						if(resp.data.success) {
							debugger;
							this.carSaleQuery();
							this.$data.comFormShow = false;
							this.$message(resp.data.msg);
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {});
			},
			dateChange: function() {

				this.$data.dayNum=this.DateDiff(this.$data.comFormData.allocationOrder.allocationDate, this.$data.comFormData.allocationOrder.arriveWarehouseDate)
			debugger;
			},
			//计算时间差
			DateDiff: function(startDates,endDates) { //sDate1和sDate2是2002-12-18格式
				
				if(startDates!="" && endDates!=""){
				
				var  aDate,  oDate1,  oDate2,  iDays, sDate1,sDate2
				sDate1=this.momentFu(startDates);
				sDate2=this.momentFu(endDates);
  				//var  aDate,  oDate1,  oDate2,  iDays  
       			aDate  =  sDate1.split("-")  
      			oDate1  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])    //转换为12-18-2002格式  
       			aDate  =  sDate2.split("-")  
       			oDate2  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])  
       			var tp  = oDate1  -  oDate2;
       			
	       			if(tp>0){
	       				iDays = 0
	       				return iDays;
	       				this.$message.error("时间有误，请重新填写！");
	       			}
	       			else{
		       			iDays  =  parseInt(Math.abs(oDate1  -  oDate2)  /  1000  /  60  /  60  /24)    //把相差的毫秒数转换为天数  
		       			return  iDays; 
	       			}
       			
				}
				else{
					iDays = 0
	       			return iDays;
				}
			},
			save: function(val) {
				this.$data.conditions.allocationId=this.$data.comFormData.allocationOrder.id;//调拨单id
				this.$data.conditions.approvaler=this.$data.comFormData.allocationOrder.applicant;//申请人
				this.$data.conditions.approvalStatus=val;//审批状态
				this.$data.conditions.approvalOpinion=this.$data.allocationReasons;//审批意见
				this.$http.post(this.API_ROOT + '/scm/approvalflowDetail/save', this.$data.conditions, {
					params: {
						approvalflowPId:this.$data.comFormData.allocationOrder.allocationType
					}
				}).then(resp => {
					if(resp.data.success) {
						//resp.data.total = parseInt(resp.data.total);
						// es5写法
						//this.$data.tableData = resp.data;
						//this.baseQuery(this.$data.curTreeDeptId);
						this.carSaleQuery();
						this.$data.comFormShow = false;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},
			saves: function(val) {
				this.$http.get(this.API_ROOT + '/scm/approvalflow/backApproval', {
					params: {
						id:this.$data.comFormData.allocationOrder.id
					}
				}).then(resp => {
					if(resp.data.success) {
						this.$message(resp.data.msg);
						//resp.data.total = parseInt(resp.data.total);
						// es5写法
						this.carSaleQuery();
						this.$data.comFormShow = false;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},
			//状态转换
			statusCov: function(row, column) {
				var temp = '';
				switch(row.allocationStatus) {
					case '0':
						temp = "已创建";
						break;
					case '1':
						temp = '已提交';
						break;
					case "2":
						temp = '已审核';
						break;
					default:
						''
						break
				};
				return temp;
			},
			//查看发票详情
			/*info: function(index) {
				this.$http.get(this.API_ROOT + '/scm/allocationOrder/carList', {
					params: {
						id: this.$data.tableData.dataList[index].id
					}
				}).then(resp => {
					debugger;
					this.$data.comFormShow = true;
					this.$data.comFormData.allocationOrderDetailList = resp.data.data;
				}, resp => {});

				//this.$message("已生成出库单");
			},*/
			info: function(index) {
				debugger;
				this.$data.comFormData.allocationOrder.id = this.$data.tableData.dataList[index].id;
				this.$data.comFormData.allocationOrder.fromWarehouse = this.$data.tableData.dataList[index].fromWarehouse;
				this.$data.comFormData.allocationOrder.aimWarehouse = this.$data.tableData.dataList[index].aimWarehouse;
				this.$data.comFormData.allocationOrder.allocationType = this.$data.tableData.dataList[index].allocationType;
				this.$data.comFormData.allocationOrder.allocationDate = this.$data.tableData.dataList[index].allocationDate;
				this.$data.comFormData.allocationOrder.allocationReason = this.$data.tableData.dataList[index].allocationReason;
				this.$data.comFormData.allocationOrder.applicant = this.$data.tableData.dataList[index].applicant;
				this.$data.comFormData.allocationOrder.estimateBackDate = this.$data.tableData.dataList[index].estimateBackDate;
				this.$data.comFormData.allocationOrder.dayNum=this.DateDiff(this.$data.comFormData.allocationOrder.allocationDate,this.$data.comFormData.allocationOrder.estimateBackDate);
				this.$data.comFormData.allocationOrder.rongzi = this.$data.tableData.dataList[index].rongzi; //融资方式
				
				this.$data.comFormData.allocationOrder.payMoney = this.$data.tableData.dataList[index].payMoney;
				this.$data.comFormData.allocationOrder.payTime = this.$data.tableData.dataList[index].payTime;
				this.$data.comFormData.allocationOrder.storeCar = this.$data.tableData.dataList[index].storeCar;
				this.$data.comFormData.allocationOrder.depositMoney = this.$data.tableData.dataList[index].depositMoney;
				this.$data.comFormData.allocationOrder.depositRatio = this.$data.tableData.dataList[index].depositRatio;
				
				
				
				
				//this.dateChange();
				debugger;
				//this.info(1);
				this.$http.get(this.API_ROOT + '/scm/allocationOrder/carList', {
					params: {
						id: this.$data.tableData.dataList[index].id
					}
				}).then(resp => {
					debugger;
					//this.$data.editComFormShow = true;
					this.$data.comFormData.allocationOrderDetailList = resp.data.data;
				}, resp => {});
				//this.$data.comFormData.allocationOrder = Object.assign(this.$data.comFormData.allocationOrder, this.$data.emptyData.allocationOrder);
				//this.$data.comFormData.allocationOrderDetailList = [];
				this.$data.comFormShow = true;
			},
			//车型车系选择的回调
			insert: function(val, lable) {
				debugger;
				this.$data.condition.carModel = val;
				this.$data.carModelName = lable;
			},
			//销售状态转换
			carSaleStatusCov: function(row, column) {
				return row.saleType == "0" ? '不可售' : '可售';
			},

			//合格证状态转换
			certificateStatusCov: function(row, column) {
				return this.$data.certificateStatusCovertData[row.certificateStatus];
			},

			certificateStatusCovert: function() {
				this.$http.get(this.API_ROOT + '/base/dict/convert', {
					params: {
						group: "scmCertificateStatus"
					}
				}).then((response) => {
					this.$data.certificateStatusCovertData = response.data;
				}, (response) => {});
			},
			//仓库类型转换
			warehouseTypeCov: function(row, column) {
				return row.warehouseType == "0" ? '虚拟库' : '实体库';
			},

			//财务归属类型转换
			carFinancialBelongCov: function(row, column) {
				return row.financialBelong == "0" ? '本店' : '非本店';
			},
			//打开车型车系选择
			handleIconClick: function() {
				this.$data.showStart = true;
			},
			//查询树节点
			searchTree: function() {
				if(this.$data.dictTreeSearchValue == "") {
					this.$message("请输入查询条件");
					this.queryParamTree();
					return;
				}
				this.$refs.dictTree.filter(this.$data.dictTreeSearchValue);
			},
			//点击资源树节点
			handleNodeClick(data) {
				debugger;
				this.$data.carType = data.type;
				this.$data.datalabel = data.label;
				this.$data.datavale = data.value;
			},
			//查询参数树
			queryParamTree: function() {
				//获取资源树
				debugger;
				this.$http.get(this.API_ROOT + '/base/car/tree', {}).then((response) => {
					this.$data.paramTreeData = response.data;
				}, (response) => {});
			},
			//资源过滤
			filterNode: function(value, data, node) {
				if(!value) return true;
				return data.label.indexOf(value) !== -1;
			},

			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
			},

			//			add: function() {
			//				this.$data.warehouseFormData = Object.assign(this.$data.warehouseFormData, this.$data.emptyWarehouseFormData);
			//				this.$data.warehouseFormShow = true;
			//			},

			//查询销售车辆
			carSaleQuery: function() {
				debugger;
				this.$data.condition.enterTimeStart = this.momentFu(this.$data.data.firstStart);
				this.$data.condition.enterTimeStop = this.momentFu(this.$data.data.firstStarts);
				this.$http.post(this.API_ROOT + '/scm/allocationOrder/approvalPage', this.$data.condition, {
					params: {
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						// es5写法
						this.$data.tableData = resp.data;
						//this.baseQuery(this.$data.curTreeDeptId);
						//this.$data.exFormShow = false;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
				debugger;
			},
			//时间判断为空的封装
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(dt).format("YYYY-MM-DD");
				}
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.carSaleQuery();
			},
			//调拨类型转换
			transferTypeCovert: function() {
				this.$http.get(this.API_ROOT + '/base/dict/convert', {
					params: {
						group: "transferType"
					}
				}).then((response) => {
					this.$data.tranTypeConvertData = response.data;
				}, (response) => {});
			},
			//调拨类型
			saleStatusCov: function(row, column) {
				return this.$data.tranTypeConvertData[row.allocationType];
			},
			//发出仓库代码与名称转换
			fromWarehouseCov: function(row, column) {
				return this.$data.levelConvertData[row.fromWarehouse];
			},
			//接受仓库代码与名称转换
			aimWarehouseCov: function(row, column) {
				return this.$data.levelConvertData[row.aimWarehouse];
			},
			//仓库转换转换
			warehouseCovert: function() {
				this.$http.get(this.API_ROOT + '/scm/warehouse/convert', {
					params: {
					}
				}).then((response) => {
					this.$data.levelConvertData = response.data;
				}, (response) => {});
			},
		},
		//表单创建时执行
		created: function() {
			this.carSaleQuery();
			this.certificateStatusCovert();
			this.warehouseCovert();
			//查找车型
			this.queryParamTree();
			this.transferTypeCovert();
			//获取仓库类型下拉
			this.$http.get(this.API_ROOT + '/scm/warehouse/combo', {
				params: {
					group: "warehouse"
				}
			}).then((response) => {
				this.$data.warehouseType = response.data;
			}, (response) => {});

			//获取仓库的下拉
			this.$http.get(this.API_ROOT + '/scm/warehouse/combo', {
				params: {

				}
			}).then((response) => {
				this.$data.warehouseCombo = response.data;
			}, (response) => {});
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/rbac/login/btn', 
				params: { //发送的参数
					resPath: "scm/scmTransferShenop", 
				}
			}).then(function(resp) {
				var btnData = resp.data.dataList;
				var temp = {};
				for(var i = 0; i < btnData.length; i++) {
					var btnName = btnData[i].btnName;
					temp[btnName] = btnName;
				}

				Object.assign(this.$data.btnGroup, temp);
			}, function(error) {
				// error
			})
		},
		components: {
			carserice
		},
	}
</script>
<style>
	.el-table .info-row {
		height: 10px !important;
	}
	
	.item {
		width: 30px;
	}
	
	.el-form-item {
		clear: both;
	}
	
	.el-dropdown .el-button-group,
	.el-table .el-tooltip,
	.el-table .el-tooltip__rel {
		display: inline;
	}
	
	.el-table {
		height: 100%;
		width: 100%;
	}
	
	#el-select {
		width: 200px;
	}
	.box-card-f {
		width: 100%;
		height: 260px;
		margin-top: 20px;
		margin-bottom: 20px;
	}
</style>